<template>
	<view>
		<!-- <back-fixed :title="topTitle" urlBack="/pages/intel/index"></back-fixed> -->
		<view class="main">
			<view class="qr_box">
				<view class="left">
					<u-image :src="qrIcon" width="130rpx" height="130rpx" @click="downLoadFile"></u-image>
					<view class="title_box">
						<view class="title">
							{{topData.cardName ? topData.cardName : ''}}
						</view>
						<view class="my_download" @click="downLoadFile">
							<view class="btn_download">
								下载专属码
							</view>
						</view>
					</view>
				</view>
				<view class="right" @click="goNewCodeEdit">
					<!-- <u-icon name="arrow-right" size="36rpx" color="#CCCCCC;"></u-icon> -->
				</view>
			</view>
			<view class="list_box">
				<view class="list_title">
					用户统计
				</view>
				<view class="list">
					<view class="list_card" v-for="n in count" :key="n.name">
						<view class="list_card_top">
							{{n.num}}
						</view>
						<view class="list_card_btn">
							{{n.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="huanzhe_list">
				<view class="list_title">
					用户列表
				</view>
				<view class="huanzhe_card" v-for="m in list" :key="m.goNewCodeEdit">
					<view class="huanzhe_card_title">
						{{m.nickName}}<span style="color: #4DC0D9;">@{{aiType[m.type]}}</span>
					</view>
					<view class="huanzhe_card_time" :class="{dash_border:m.tagName}">
						{{m.createTime}} 由<span style="color: #4DC0D9;padding: 0 20rpx;">{{m.userName}}</span>添加
					</view>
					<scroll-view scroll-x="true" style="width: 95%" v-if="m.tagName">
						<view class="huanzhe_card_box">
							<view class="huanzhe_icon" v-for="n in myTags(m.tagName)" :key="n">
								{{n}}
							</view>
						</view>
					</scroll-view>
				</view>
				<view :class="{'pages':!empty}" :style="{'paddingBottom':!empty ? '0' : '40rpx' }">
					<u-loadmore :status="status" v-if="!empty&&this.list.length>15" />
				</view>
			</view>
			<view class="img bg-white p-b-40" v-if="empty" style="border-radius: 20rpx;">
				<u-image :src="emptyImg" width="335rpx" height="320rpx"></u-image>
				<view class="txt">
					暂无患者
				</view>
			</view>
			<u-gap height="24" bg-color="#f8f8f8"></u-gap>
		</view>
		<go-nav></go-nav>
	</view>
</template>

<script>
	import {
		getDetailsTop,
		getCardDetailsPage
	} from '@/api/index.js'
	import pageMixin from '@/utils/pageMixin.js' //在需要引入的组件中引入
	export default {
		mixins: [pageMixin],
		data() {
			return {
				topTitle: '',
				cardId: '',
				qrIcon: require('@/static/img/qr_icon.png'),
				topData: [], //除患者列表的信息
				count: [{
						name: '用户总计',
						num: 0
					},
					{
						name: '新增用户',
						num: 0
					},
					{
						name: '流失用户',
						num: 0
					},
				], //专属码统计
				aiType: ['无', '微信', '企业微信'],
				emptyImg: require('@/static/img/No_team@2x.png'),
			}
		},
		onLoad(obj) {
			uni.setStorageSync('qrUrl', '')
			if (obj.cardId) {
				this.cardId = obj.cardId
				this.getTop()
				//console.log(obj.cardId);
			}
		},
		computed: {
			myTags(tagList) {
				return (tagList) => {
					if (tagList) {
						return tagList.split(',')
					} else {
						return tagList
					}
				}
			}
		},
		methods: {
			async getTop() {
				let res = await getDetailsTop(this.cardId)
				if (res.code == 200) {
					this.topData = res.data
					this.count[0].num = res.data.cardCountVO.totalPatient
					this.count[1].num = res.data.cardCountVO.newPatient
					this.count[2].num = res.data.cardCountVO.deletedPatient
					if (res.data.cardType == 1) {
						this.topTitle = '医生专属码详情'
					} else {
						this.topTitle = '团队专属码详情'
					}
				}
				//console.log(res, 'res');
			},
			async getMyList(obj) { //请求,这个最好在使用那个组件中使用，这个地方可以扩展接参数
				//例如， {..obj,id:15}
				//console.log(obj);
				let res = await getCardDetailsPage({
					...obj,
					'cardId': this.cardId,
					searchType: 0,
				})
				//console.log(res, 'cardlist');
				return res
			},
			//getCardDetailsPage
			downLoadFile() {
				const url = this.topData.customQrCode
				if (url && url.includes('http')) {
					uni.setStorageSync('qrUrl', this.topData)
					uni.navigateTo({
						url: `/pages/intel/qr?cardId=${this.cardId}&team=${this.topTitle}`
					})
				} else {
					let s = this.topTitle.slice(0, 2)
					this.$u.toast(`下载失败，暂无${s}二维码图片！！`)
					uni.removeStorageSync('qrUrl')
				}
			},
			goNewCodeEdit() {
				// uni.navigateTo({
				// 	url: `/pages/intel/newCode?cardId=${this.topData.cardId}`
				// })
			}
		},
	}
</script>

<style lang="scss" scoped>
	.main {
		background-color: #F8F8F8;
		padding: 10px 24rpx 0 24rpx;
		//border-radius: 20rpx;
		// position: relative;
		// width: 100%;
		// height: 100vh;

		.list_title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #212121;
			line-height: 42rpx;
			padding: 24rpx 0 30rpx 24rpx;
		}

		.qr_box {
			background-color: white;
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 24rpx;
			border-radius: 20rpx;

			.left {
				display: flex;

				.qr {
					width: 130rpx;
					height: 130rpx;
					background-color: #4DC0D9;
				}

				.title_box {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					//align-items: center;
					margin-left: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 36rpx;
					color: #212121;
					line-height: 42rpx;

					.title {}

					.my_download {
						.btn_download {
							text-align: center;
							display: inline;
							color: #FFFFFF;
							font-size: 30rpx;
							line-height: 35rpx;
							background: #4DC0D9;
							font-weight: 500;
							border-radius: 12rpx;
							padding: 8rpx 30rpx;
						}
					}
				}
			}

			.right {}
		}

		.list_box {
			background-color: white;
			margin-top: 20rpx;
			border-radius: 20rpx;

			.list {
				display: flex;
				justify-content: space-around;

				.list_card {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;
					background: #F8F8F8;
					border-radius: 20rpx;
					margin-bottom: 24rpx;
					padding: 24rpx 46rpx;

					.list_card_top {}

					.list_card_btn {}
				}
			}
		}

		.huanzhe_list {
			background: white;
			margin-top: 24rpx;
			border-radius: 20rpx;
			
			// position: absolute;
			// width: 100%;
			// height: 40vh;
			.huanzhe_card {
				display: flex;
				flex-direction: column;
				margin: 0 24rpx 0 24rpx;
				background: #F8F8F8;
				border-radius: 20rpx;
				padding: 24rpx 0 0 24rpx;
				//min-height: 100vh;
				.huanzhe_card_title {
					font-weight: bold;
					font-size: 34rpx;
					color: #212121;
					line-height: 40rpx;
				}

				.huanzhe_card_time {
					font-weight: 500;
					font-size: 28rpx;
					color: #999999;
					line-height: 33rpx;
					margin-bottom: 26rpx;
					margin-top: 8rpx;
					padding-bottom: 26rpx;
				}

				.huanzhe_card_box {
					display: flex;
					padding-bottom: 24rpx;

					.huanzhe_icon {
						padding: 8rpx 20rpx;
						background: #FFFFFF;
						border-radius: 12rpx;
						flex-shrink: 0;
						margin-bottom: 24rpx;
						margin-right: 12rpx;
					}

				}
			}

			.pages {
				padding: 40rpx 0 40rpx 0;
				background-color: white;
				border-radius: 20rpx;
				//height: 40vh;
			}
		}
	}

	.dash_border {
		border-bottom: 1px dashed #E8E8E8;
	}

	.img {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.txt {
		margin-top: 10rpx;
		//font-weight: 500;
		font-size: 32rpx;
		color: #C7C7C7;
		line-height: 38rpx;
		text-align: center;
	}
</style>